import React, { memo, useEffect } from "react";
import { Carousel } from "antd";
import SongList from "@/components/song-list/index";
import ConcentrationWarrper from "./style";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { getBannerInfo, getHotRecommendsInfo, getNewAlbumsInfo } from "@/store/modules/hallSlice";

const index = memo(() => {
  const dispatch = useDispatch();
  const { banners,hotRecommends,newAlbums } = useSelector((state) => {
    return {
      banners: state.hall.banners,
      hotRecommends:state.hall.hotRecommends,
      newAlbums:state.hall.newAlbums
    };
  },shallowEqual);
  const contentStyle = {
    margin: 0,
    height: "380px",
    color: "#fff",
    lineHeight: "160px",
    textAlign: "center",
    background: "#dadfe8",
  };
  useEffect(() => {
    if(banners?.length<=0){
      dispatch(getBannerInfo())
    }
    if(hotRecommends?.length<=0){
    dispatch(getHotRecommendsInfo())
    }
    if(newAlbums?.length<=0){
    dispatch(getNewAlbumsInfo())
    }
  }, []);

  return (
    <ConcentrationWarrper>
      <Carousel autoplay>
        {banners?.map((n, i) => {
          return (
            <div key={i}>
              <img style={contentStyle} src={n.imageUrl} alt="" />
            </div>
          )
        })}
      </Carousel>
      {
        hotRecommends && <SongList title="热门推荐" listData={hotRecommends} />
      }
      {/* {
        newAlbums && <SongList title="新碟上架" listData={newAlbums}/>
      } */}
    </ConcentrationWarrper>
  );
});

export default index;
